<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 10:53:02
 * @LastEditTime : 2022-10-01 08:32:38
 * @FilePath     : \表单控件绑定\v-model和组件\第四种(自定义v-model修饰符)\带参数的修饰符\第一种写法：defineComponent\my-component.vue
-->
// src/components/my-component.vue

<template>
    <input type="text" 
      :value="description"
      @input="$emit('update:description', $event.target.value)"
    >
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: 'MyComponent',
    emits: ['update:description'],
    props: ['description', 'descriptionModifiers'],
    created() { //通过arg+Modifiers访问到
        console.log('1', this.descriptionModifiers)
    }
})
</script>

Vue中先遍历data选项中所有的属性（发布者）用`Object.defineProperty`劫持这些属性将其转为getter/setter。读取数据时候会触发getter。修改数据时会触发setter。
然后给每个属性对应new Dep()，Dep是专门收集依赖、删除依赖、向依赖发送消息的。先让每个依赖设置在`Dep.target`上，在Dep中创建一个依赖数组，先判断`Dep.target`是否已经在依赖中存在，不存在的话添加到依赖数组中完成依赖收集，随后将`Dep.target`置为上一个依赖。
组件在挂载过程中都会new一个Watcher实例。这个实例就是依赖（订阅者）。Watcher第二参数式一个函数，此函数作用是更新且渲染节点。
在首次渲染过程，会自动调用Dep方法来收集依赖，收集完成后组件中每个数据都绑定上该依赖。当数据变化时就会在setter中通知对应的依赖进行更新。
在更新过程中要先读取数据，就会触发Wacther的第二个函数参数。一触发就再次自动调用Dep方法收集依赖，同时在此函数中运行patch（diff运算)来更新对应的DOM节点，完成了双向绑定